<template>
  <view class="time-progress">
    <view v-for="(time, index) in times" :key="index" :class="['time-period', getTimeClass(time)]">
      <div class="time-box"></div> <!-- 用于显示背景颜色 -->
      <span class="time-label">{{ time }}</span> <!-- 显示时间数字 -->
    </view>
  </view>
</template>

<script>
	export default {
		props: {
			times: {
				type: Array,
				default: () => []
			},
			current: {
				type: Array,
				default: () => []
			},
			pendingTimes: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			getTimeClass(time) {
				const isCurrent = this.current.includes(time);
				const isBooked = this.isBooked(time);
				const isPending = this.pendingTimes.includes(time); // 检查是否在待定数组中
				return isCurrent ? 'current' : (isBooked ? 'booked' : (isPending ? 'pending' : 'available'));
			},
			isBooked(time) {
				// 这里可以添加逻辑来判断某个时间段是否被预定
				return false; // 默认返回false，表示没有被预定
			}
		}
	}
</script>

<style scoped>
	.time-progress {
		display: flex;
		align-items: center;
		background-color: #f0f0f0;
		height: 2vh;
		border-radius: 10px;
		overflow: hidden;
		padding: 0 1vw;
	}

	.time-period {
		flex: 0 0 auto;
		width: 4%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 10px;
		color: #000000;
		position: relative;
	}

	.time-period::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		transition: background-color 0.3s;
		z-index: -1;
	}

	.booked {
		background-color: blue;
		color: white;
	}

	.available {
		background-color: lavender;
		color: black;
	}

	.current {
		background-color: red;
		color: white;
	}

	.pending {
		background-color: yellow;
		/* 设置为黄色 */
		color: black;
		/* 文字颜色 */
	}
</style>